<template>
  <view class="gg-cell">
    <view class="gg-cell-box">
      <view class="gg-cell-main" :class=" sublabel && 'gg-cell-main-big' " @tap="jump">
        <view class="gg-cell-main-left">
          <view class="gg-cell-main-left-icon" v-if="image|| $slots.before">
            <image class="gg-cell-main-left-icon-image" :src="image" mode="aspectFit" v-if="image" />
            <slot name="before" v-else />
          </view>
          <view class="gg-cell-main-left-text" :class="!image && !$slots.before?'gg-cell-main-left-text-noimage':''">
            <view class="gg-cell-main-left-text-intact" v-if="!sublabel">
              {{label}}
            </view>
            <view class="gg-cell-main-left-text-double" v-else>
              <view class="gg-cell-main-left-text-label">
                {{label}}
              </view>
              <view class="gg-cell-main-left-text-sublabel">
                {{sublabel}}
              </view>
            </view>
          </view>
        </view>
        <view class="gg-cell-main-center" :class="url=='' && !$listeners.click?'gg-cell-main-center-nourl':''">
          <view class="gg-cell-main-center-intact" v-if="!subexplain">
            {{explain}}
          </view>
          <view class="gg-cell-main-center-double" v-else>
            <view class="gg-cell-main-center-explain">
              {{explain}}
            </view>
            <view class="gg-cell-main-center-subexplain">
              {{subexplain}}
            </view>
          </view>
        </view>
        <view class="gg-cell-main-more" v-if="url || $listeners.click">
          <view class="gg-cell-main-more-top"></view>
          <view class="gg-cell-main-more-bottom"></view>
        </view>
      </view>
      <view class="gg-cell-message" v-if="message">
        {{message}}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "GgCell",
  options: {
    addGlobalClass: true,
  },
  props: {
    url: {
      type: String,
      default: ''
    },
    urlType: {
      type: String,
      default() {
        return 'navigateTo';
      }
    },
    label: {
      type: String,
      default: ''
    },
    sublabel: {
      type: String,
      default: ''
    },
    explain: {
      type: String,
      default: ''
    },
    subexplain: {
      type: String,
      default: ''
    },
    image: {
      type: String,
      default: ''
    },
    message: {
      type: String,
      default: ''
    }

  },
  watch: {
    dataLists(newVal) {
      this._dealDataLists();
    }
  },
  data() {
    return {

    };
  },
  created: function () {
    // console.log(this.$slots);
  },
  methods: {
    jump() {
      if (typeof this.url == 'string' && this.url) {
        const url = this.url;
        switch (this.urlType) {
          case 'redirectTo'://关闭当前页面，跳转到应用内的某个页面。
            uni.redirectTo({
              url: this.url
            });
            break;
          case 'reLaunch'://关闭所有页面，打开到应用内的某个页面。
            uni.reLaunch({
              url: this.url
            });
            break;
          case 'switchTab'://跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
            uni.switchTab({
              url: this.url
            });
            break;
          default://默认【navigateTo】 保留当前页面，跳转到应用内的某个页面
            uni.navigateTo({
              url: this.url
            });
        }

      } else {
        this.$emit('click')
      }
    }
  }
};
</script> 
<style >
/* #ifndef MP-WEIXIN */
.gg-cell:last-child .gg-cell-main {
  border-bottom: none;
}
/* #endif */
/* #ifdef MP-WEIXIN */
gg-cell:last-child .gg-cell-main {
  border-bottom: none;
}
/* #endif */
.gg-cell-box {
  height: auto;
  background-color: #ffffff;
  padding-left: 15px;
}
.gg-cell-main {
  padding: 5px 15px 5px 0;
  border-bottom: solid 1px #f1f1f1;
  display: flex;
}
.gg-cell-main-big {
  padding: 9px 15px 9px 0;
}
.gg-cell-main-left {
  width: 200px;
  display: flex;
}
.gg-cell-main-left-icon {
  width: 20px;
  height: 40px;
  line-height: 40px;
}
.gg-cell-main-left-icon-image {
  width: 20px;
  height: 40px;
}
.gg-cell-main-left-text {
  width: calc(100% - 20px);
  padding-left: 10px;
}
.gg-cell-main-left-text-noimage {
  width: 100%;
  padding-left: 0px;
}
.gg-cell-main-left-text-intact {
  font-size: 15px;
  height: 40px;
  line-height: 40px;
  overflow: hidden;
}
.gg-cell-main-left-text-label {
  font-size: 15px;
  line-height: 22px;
  height: 22px;
  overflow: hidden;
}
.gg-cell-main-left-text-sublabel {
  font-size: 12px;
  color: #999999;
  line-height: 18px;
  height: 18px;
  overflow: hidden;
}
.gg-cell-main-center {
  width: calc(100% - 200px - 20px);
  display: table;
  height: 40px;
  padding-left: 10px;
}
.gg-cell-main-center-explain,
.gg-cell-main-center-subexplain {
  font-size: 14px;
  color: #999999;
  line-height: 20px;
  height: 20px;
  overflow: hidden;
  text-align: right;
}

.gg-cell-main-center-nourl {
  width: calc(100% - 200px);
}
.gg-cell-main-center-intact {
  font-size: 14px;
  color: #999999;
  display: table-cell;
  vertical-align: middle;
  line-height: 20px;
  height: 40px;
  overflow: hidden;
  max-height: 40px;
  text-align: right;
}

.gg-cell-main-more {
  height: 40px;
  width: 20px;
}
.gg-cell-main-more-top,
.gg-cell-main-more-bottom {
  width: 10px;
  height: 2px;
  background-color: #c1c1c1;
  position: relative;
  left: 10px;
}
.gg-cell-main-more-top {
  transform: rotate(45deg);
  top: 16px;
}
.gg-cell-main-more-bottom {
  transform: rotate(-45deg);
  top: 20px;
}
.gg-cell-message {
  font-size: 13px;
  color: #999999;
  line-height: 1.5em;
  padding: 5px 15px 5px 0;
}
</style>
